<script setup lang="ts">
import type { NoticeVO } from '@/services/model/noticeModel';
import { getNoticeById } from '@/services/api/notice';
import { onShareAppMessage } from '@dcloudio/uni-app';
import { onMounted, ref } from 'vue';

interface NoticeDetail {
  id: string
  title: string
  content: string
  publishTime: string
  publisher: string
}

const detail = ref<NoticeDetail | null>(null);
const loading = ref(false);

onMounted(() => {
  loadDetail();
});

async function loadDetail() {
  const query = getCurrentPages()[getCurrentPages().length - 1].options;
  const id = query.id as number;

  loading.value = true;
  try {
    // 实际项目中替换为API调用
    const res = await getNoticeById(id);
    detail.value = {
      id,
      title: '系统维护通知',
      content: `为了提供更好的服务体验，我们将于2023年12月15日凌晨2:00-4:00进行系统维护升级，期间系统将无法访问，请提前做好安排。

升级内容：
1. 数据库性能优化
2. 服务器扩容
3. 安全补丁更新

如有任何问题，请联系客服邮箱: support@example.com`,
      publishTime: '2023-12-10 14:30:00',
      publisher: '系统管理员',
    };
  } finally {
    loading.value = false;
  }
}

// 分享功能
onShareAppMessage(() => {
  return {
    title: detail.value?.title || '公告详情',
    path: `/pages/notice/detail?id=${detail.value?.id || ''}`,
  };
});
</script>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 返回按钮和标题 -->
    <view class="sticky top-0 z-10 bg-white shadow-sm px-4 py-3 flex items-center">
      <uni-icons type="arrowleft" size="24" @click="uni.navigateBack" />
      <text class="ml-2 text-lg font-bold text-gray-800">
        公告详情
      </text>
    </view>

    <!-- 公告内容 -->
    <view v-if="loading" class="flex justify-center py-8">
      <uni-load-more status="loading" />
    </view>

    <view v-else-if="detail" class="px-4 py-4">
      <view class="bg-white rounded-lg shadow-sm p-5">
        <text class="text-xl font-bold text-gray-800">
          {{ detail.title }}
        </text>

        <view class="mt-4 flex justify-between border-b pb-3">
          <view class="flex items-center">
            <uni-icons type="person" size="16" color="#6B7280" />
            <text class="ml-1 text-sm text-gray-500">
              {{ detail.publisher }}
            </text>
          </view>
          <text class="text-sm text-gray-500">
            {{ detail.publishTime }}
          </text>
        </view>

        <view class="mt-4 text-gray-700 whitespace-pre-line">
          {{ detail.content }}
        </view>
      </view>

      <view class="mt-6 text-center">
        <button class="bg-blue-500 text-white rounded-full px-6 py-2 text-sm" @click="uni.navigateBack">
          返回列表
        </button>
      </view>
    </view>

    <view v-else class="flex flex-col items-center justify-center py-20">
      <uni-icons type="info" size="48" color="#9CA3AF" />
      <text class="mt-4 text-gray-500">
        公告不存在或已删除
      </text>
      <button class="mt-6 bg-blue-500 text-white rounded-full px-6 py-2 text-sm" @click="uni.navigateBack">
        返回列表
      </button>
    </view>
  </view>
</template>
